<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .out{
            margin:auto;
            width:535px;
            height: 60px;
            border: grey  1px solid;
            line-height: 60px;
        }
        .left{
            display: inline-block;
            height:40px;
            width:120px;
            text-align: center;
            line-height:40px;
            font-size: 16px;
        }
        .right{
            display: inline-block;
            height:40px;
            width:400px;
            line-height:40px;
            font-size: 16px;
            border:white 1px solid;
            outline-style:none;
        }
        p{
            width: 535px;
            height:16px;
            margin: 0 auto;
            font-size: 10px;
        }
        #btn{
            display:block;
            width:535px;
            height:60px;
            border:red 1px solid;
            background-color: red;
            margin: 0 auto;
            font-size: 20px;
        }
        a{
            text-decoration:none;
            color:white;
        }
    </style>
</head>
<body>
    <div>
        <div class="out">
            <div class="left" >用户名</div>
           <input type="text" class="right" id="userName" title="1" >
        </div>
        <p></p>
    </div>
    <div>
        <div class="out">
            <div class="left" >设置密码</div>
           <input type="text" class="right" id="password" title="2" >
        </div>
        <p></p>
    </div>
    <div>
        <div class="out">
            <div class="left">确认密码</div>
           <input type="text" class="right" id="repassward" title="3">
        </div>
        <p></p>
    </div>
    <div>
        <div class="out">
            <div class="left">中国0086</div>
           <input type="text" class="right" id="telephone" title="4">
        </div>
        <p></p>
    </div>
    <div>
        <div class="out">
            <div class="left">手机验证码</div>
            <input type="text" class="right" id="number" title="5" >
        </div>
        <p></p>
    </div>
    <button id="btn"><a href="#">立即注册</a></button>
</body>
<script>
    var userName = document.getElementById("userName");
    var password = document.getElementById("password");
    var repassword = document.getElementById("repassward");
    var telephone = document.getElementById("telephone");
    var number = document.getElementById("number");

    var onclickValue=["支持中文数字，字符为4-20个","建议至少使用两种字符组合，6-20个字符","请再次输入密码","完成验证后，您可使用该号找回密码","支持中文数字，字符为4-20个"];
    var onblurkValue=["长度需大于4","长度需大于6","长度需大于4","长度需大于4","长度需大于4"];
    var inputLength=[4,6,4,4,4];
    var functionName=[userName,password,repassword,telephone,number];
    var i=0;

    userName.value = "您的账户名和登录名";
    password.value = "建议至少使用两种字符组合";
    repassword.value="请再次输入密码";
    telephone.value="建议使用常用手机号";
    number.value="请输入手机验证码";

    for(;i<5;i++){
        functionName[i].onclick=function(){
            var index = this.getAttribute("title");
            this.value = "";
            this.parentElement.nextElementSibling.innerHTML =onclickValue[index-1];
            this.parentElement.nextElementSibling.style.color="black";
            this.parentElement.style.borderColor="grey";
        }
        functionName[i].onblur=function(){
            var index = this.getAttribute("title");
            if(this.value.length<inputLength[index-1]||this.value ==""){
                this.parentElement.nextElementSibling.innerHTML=onblurkValue[index-1];
                this.parentElement.nextElementSibling.style.color="red";
                this.parentElement.style.borderColor = "red";
            }
        }
    }
</script>
</html>